<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄时钟</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 主标题 -->
        <h1 class="app-title">🍅 番茄时钟</h1>
        
        <!-- 状态显示区域 -->
        <div class="status-section">
            <div class="current-status" id="currentStatus">准备开始</div>
            <div class="tomato-counter">
                <span class="counter-label">今日完成:</span>
                <span class="counter-value" id="tomatoCount">0</span>
                <span class="counter-unit">个番茄</span>
            </div>
        </div>
        
        <!-- 时间显示区域 -->
        <div class="timer-section">
            <div class="time-display" id="timeDisplay">25:00</div>
            <div class="progress-ring">
                <svg class="progress-ring-svg" width="200" height="200">
                    <circle class="progress-ring-circle-bg" cx="100" cy="100" r="90"></circle>
                    <circle class="progress-ring-circle" cx="100" cy="100" r="90" id="progressCircle"></circle>
                </svg>
            </div>
        </div>
        
        <!-- 控制按钮区域 -->
        <div class="control-section">
            <button class="control-btn start-btn" id="startBtn">开始</button>
            <button class="control-btn pause-btn" id="pauseBtn" disabled>暂停</button>
            <button class="control-btn reset-btn" id="resetBtn">重置</button>
            <button class="control-btn focus-btn" id="focusBtn">专注模式</button>
            <button class="control-btn settings-btn" id="settingsBtn">设置</button>
            <button class="control-btn stats-btn" id="statsBtn">统计</button>
            <button class="control-btn tasks-btn" id="tasksBtn">任务</button>
        </div>
        
        <!-- 时间设置弹窗 -->
        <div class="settings-modal" id="settingsModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>时间设置</h3>
                    <button class="close-btn" id="closeSettingsBtn">&times;</button>
                </div>
                
                <div class="modal-body">
                    <!-- 工作时间设置 -->
                    <div class="time-setting-group">
                        <h4>🍅 工作时间</h4>
                        <div class="time-picker">
                            <div class="time-wheel">
                                <label>小时</label>
                                <select id="workHours">
                                    <option value="0" selected>0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                            </div>
                            <div class="time-wheel">
                                <label>分钟</label>
                                <select id="workMinutes">
                                    <option value="15">15</option>
                                    <option value="20">20</option>
                                    <option value="25" selected>25</option>
                                    <option value="30">30</option>
                                    <option value="35">35</option>
                                    <option value="40">40</option>
                                    <option value="45">45</option>
                                    <option value="50">50</option>
                                    <option value="55">55</option>
                                    <option value="60">60</option>
                                </select>
                            </div>
                            <div class="time-wheel">
                                <label>秒</label>
                                <select id="workSeconds">
                                    <option value="0" selected>0</option>
                                    <option value="15">15</option>
                                    <option value="30">30</option>
                                    <option value="45">45</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 短休息设置 -->
                    <div class="time-setting-group">
                        <div class="setting-header">
                            <h4>☕ 短休息</h4>
                            <label class="toggle-switch">
                                <input type="checkbox" id="enableShortBreak" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="time-picker" id="shortBreakPicker">
                            <div class="time-wheel">
                                <label>小时</label>
                                <select id="shortBreakHours">
                                    <option value="0" selected>0</option>
                                    <option value="1">1</option>
                                </select>
                            </div>
                            <div class="time-wheel">
                                <label>分钟</label>
                                <select id="shortBreakMinutes">
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5" selected>5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="12">12</option>
                                    <option value="15">15</option>
                                </select>
                            </div>
                            <div class="time-wheel">
                                <label>秒</label>
                                <select id="shortBreakSeconds">
                                    <option value="0" selected>0</option>
                                    <option value="15">15</option>
                                    <option value="30">30</option>
                                    <option value="45">45</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 长休息设置 -->
                    <div class="time-setting-group">
                        <div class="setting-header">
                            <h4>🛋️ 长休息</h4>
                            <label class="toggle-switch">
                                <input type="checkbox" id="enableLongBreak" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="time-picker" id="longBreakPicker">
                            <div class="time-wheel">
                                <label>小时</label>
                                <select id="longBreakHours">
                                    <option value="0" selected>0</option>
                                    <option value="1">1</option>
                                </select>
                            </div>
                            <div class="time-wheel">
                                <label>分钟</label>
                                <select id="longBreakMinutes">
                                    <option value="10">10</option>
                                    <option value="12">12</option>
                                    <option value="15" selected>15</option>
                                    <option value="18">18</option>
                                    <option value="20">20</option>
                                    <option value="25">25</option>
                                    <option value="30">30</option>
                                    <option value="35">35</option>
                                    <option value="40">40</option>
                                    <option value="45">45</option>
                                </select>
                            </div>
                            <div class="time-wheel">
                                <label>秒</label>
                                <select id="longBreakSeconds">
                                    <option value="0" selected>0</option>
                                    <option value="15">15</option>
                                    <option value="30">30</option>
                                    <option value="45">45</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 长休息触发设置 -->
                    <div class="time-setting-group">
                        <h4>🔄 长休息触发</h4>
                        <div class="cycle-setting">
                            <label>完成</label>
                            <select id="longBreakCycle">
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4" selected>4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                            </select>
                            <label>个番茄后进入长休息</label>
                        </div>
                    </div>
                    
                    <!-- 音频设置 -->
                    <div class="time-setting-group">
                        <div class="setting-header">
                            <h4>🔊 音频设置</h4>
                            <label class="toggle-switch">
                                <input type="checkbox" id="enableAudio" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="audio-settings" id="audioSettings">
                            <!-- 音效类型选择 -->
                            <div class="audio-setting-item">
                                <label>提示音类型</label>
                                <div class="sound-type-selector">
                                    <select id="soundTypeSelect">
                                        <option value="bell" selected>🔔 铃声 - 经典提醒音</option>
                                        <option value="chime">🎵 钟声 - 温和提醒</option>
                                        <option value="ding">✨ 叮声 - 简洁明快</option>
                                        <option value="notification">📢 通知音 - 现代科技感</option>
                                        <option value="gentle">🌟 温和音 - 不打断专注</option>
                                        <option value="success">⚡ 成功音 - 增强成就感</option>
                                    </select>
                                    <button class="preview-btn" id="previewSoundBtn">🎵 试听</button>
                                </div>
                            </div>
                            
                            <!-- 音量控制 -->
                            <div class="audio-setting-item">
                                <label>音量</label>
                                <div class="volume-control">
                                    <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.7">
                                    <span class="volume-value" id="volumeValue">70%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 主题设置 -->
                    <div class="time-setting-group">
                        <div class="setting-header">
                            <h4>🎨 界面主题</h4>
                        </div>
                        <div class="theme-settings">
                            <!-- 主题色彩方案 -->
                            <div class="theme-setting-item">
                                <label>色彩方案</label>
                                <div class="theme-selector">
                                    <div class="theme-option" data-theme="default">
                                        <div class="theme-preview default-theme">
                                            <div class="theme-color primary"></div>
                                            <div class="theme-color secondary"></div>
                                        </div>
                                        <span>经典红</span>
                                    </div>
                                    <div class="theme-option" data-theme="blue">
                                        <div class="theme-preview blue-theme">
                                            <div class="theme-color primary"></div>
                                            <div class="theme-color secondary"></div>
                                        </div>
                                        <span>海洋蓝</span>
                                    </div>
                                    <div class="theme-option" data-theme="green">
                                        <div class="theme-preview green-theme">
                                            <div class="theme-color primary"></div>
                                            <div class="theme-color secondary"></div>
                                        </div>
                                        <span>森林绿</span>
                                    </div>
                                    <div class="theme-option" data-theme="purple">
                                        <div class="theme-preview purple-theme">
                                            <div class="theme-color primary"></div>
                                            <div class="theme-color secondary"></div>
                                        </div>
                                        <span>优雅紫</span>
                                    </div>
                                    <div class="theme-option" data-theme="orange">
                                        <div class="theme-preview orange-theme">
                                            <div class="theme-color primary"></div>
                                            <div class="theme-color secondary"></div>
                                        </div>
                                        <span>活力橙</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 字体大小 -->
                            <div class="theme-setting-item">
                                <label>字体大小</label>
                                <div class="font-size-selector">
                                    <input type="radio" id="fontSmall" name="fontSize" value="small">
                                    <label for="fontSmall" class="font-size-option">小</label>
                                    <input type="radio" id="fontMedium" name="fontSize" value="medium" checked>
                                    <label for="fontMedium" class="font-size-option">中</label>
                                    <input type="radio" id="fontLarge" name="fontSize" value="large">
                                    <label for="fontLarge" class="font-size-option">大</label>
                                </div>
                            </div>
                            
                            <!-- 暗黑模式 -->
                            <div class="theme-setting-item">
                                <label>暗黑模式</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="darkModeToggle">
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <!-- 进度环样式 -->
                            <div class="theme-setting-item">
                                <label>进度环样式</label>
                                <div class="progress-style-selector">
                                    <input type="radio" id="progressClassic" name="progressStyle" value="classic" checked>
                                    <label for="progressClassic" class="progress-style-option">
                                        <div class="progress-preview classic"></div>
                                        <span>经典</span>
                                    </label>
                                    <input type="radio" id="progressModern" name="progressStyle" value="modern">
                                    <label for="progressModern" class="progress-style-option">
                                        <div class="progress-preview modern"></div>
                                        <span>现代</span>
                                    </label>
                                    <input type="radio" id="progressMinimal" name="progressStyle" value="minimal">
                                    <label for="progressMinimal" class="progress-style-option">
                                        <div class="progress-preview minimal"></div>
                                        <span>简约</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 通知设置 -->
                    <div class="time-setting-group">
                        <div class="setting-header">
                            <h4>🔔 通知设置</h4>
                        </div>
                        <div class="notification-settings">
                            <!-- 桌面通知开关 -->
                            <div class="notification-setting-item">
                                <label>桌面通知</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="enableDesktopNotifications" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <!-- 自定义通知文案 -->
                            <div class="notification-setting-item">
                                <label>自定义通知文案</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="enableCustomNotifications">
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <!-- 自定义通知内容 -->
                            <div class="custom-notification-content" id="customNotificationContent">
                                <div class="custom-notification-group">
                                    <label>通知标题</label>
                                    <input type="text" id="customNotificationTitle" placeholder="番茄时钟" maxlength="50">
                                </div>
                                
                                <div class="custom-notification-group">
                                    <label>工作完成通知</label>
                                    <input type="text" id="customWorkCompleteText" placeholder="工作时间结束！该休息一下了 🎉" maxlength="100">
                                </div>
                                
                                <div class="custom-notification-group">
                                    <label>短休息完成通知</label>
                                    <input type="text" id="customShortBreakCompleteText" placeholder="短休息结束！继续加油工作 💪" maxlength="100">
                                </div>
                                
                                <div class="custom-notification-group">
                                    <label>长休息完成通知</label>
                                    <input type="text" id="customLongBreakCompleteText" placeholder="长休息结束！准备开始新的番茄周期 🍅" maxlength="100">
                                </div>
                            </div>
                            
                            <!-- 通知交互选项 -->
                            <div class="notification-setting-item">
                                <label>通知需要手动关闭</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="notificationRequireInteraction">
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <!-- 通知自动关闭时间 -->
                            <div class="notification-setting-item">
                                <label>通知自动关闭时间</label>
                                <select id="notificationAutoCloseTime">
                                    <option value="3000">3秒</option>
                                    <option value="5000" selected>5秒</option>
                                    <option value="8000">8秒</option>
                                    <option value="10000">10秒</option>
                                    <option value="0">不自动关闭</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据管理设置 -->
                    <div class="time-setting-group">
                        <div class="setting-header">
                            <h4>💾 数据管理</h4>
                        </div>
                        <div class="data-management-settings">
                            <!-- 设置导入导出 -->
                            <div class="data-setting-item">
                                <label>设置备份</label>
                                <div class="backup-controls">
                                    <button class="data-btn export-btn" id="exportSettingsBtn">
                                        <span class="btn-icon">📤</span>
                                        导出设置
                                    </button>
                                    <button class="data-btn import-btn" id="importSettingsBtn">
                                        <span class="btn-icon">📥</span>
                                        导入设置
                                    </button>
                                    <input type="file" id="importFileInput" accept=".json" style="display: none;">
                                </div>
                            </div>
                            
                            <!-- 设置重置 -->
                            <div class="data-setting-item">
                                <label>重置选项</label>
                                <div class="reset-controls">
                                    <button class="data-btn reset-btn" id="resetSettingsBtn">
                                        <span class="btn-icon">🔄</span>
                                        重置设置
                                    </button>
                                    <button class="data-btn clear-btn" id="clearDataBtn">
                                        <span class="btn-icon">🗑️</span>
                                        清除数据
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 存储信息 -->
                            <div class="data-setting-item">
                                <label>存储信息</label>
                                <div class="storage-info" id="storageInfo">
                                    <div class="storage-item">
                                        <span class="storage-label">设置大小：</span>
                                        <span class="storage-value" id="settingsSize">计算中...</span>
                                    </div>
                                    <div class="storage-item">
                                        <span class="storage-label">总使用：</span>
                                        <span class="storage-value" id="totalUsed">计算中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button class="modal-btn cancel-btn" id="cancelSettingsBtn">取消</button>
                    <button class="modal-btn confirm-btn" id="confirmSettingsBtn">确定</button>
                </div>
            </div>
        </div>
        
        <!-- 状态指示器 -->
        <div class="status-indicator">
            <div class="indicator-item work-indicator active" id="workIndicator">
                <div class="indicator-dot"></div>
                <span>工作</span>
            </div>
            <div class="indicator-item break-indicator" id="breakIndicator">
                <div class="indicator-dot"></div>
                <span>短休息</span>
            </div>
            <div class="indicator-item long-break-indicator" id="longBreakIndicator">
                <div class="indicator-dot"></div>
                <span>长休息</span>
            </div>
        </div>
        
        <!-- 番茄进度指示 -->
        <div class="tomato-progress">
            <div class="tomato-dots">
                <div class="tomato-dot" id="tomato1"></div>
                <div class="tomato-dot" id="tomato2"></div>
                <div class="tomato-dot" id="tomato3"></div>
                <div class="tomato-dot" id="tomato4"></div>
            </div>
            <div class="progress-label">当前轮次进度</div>
        </div>
    </div>
    
    <!-- 音频元素 -->
    <audio id="notificationSound" preload="auto">
        <source src="assets/sounds/notification.mp3" type="audio/mpeg">
    </audio>
    
    <!-- 统计面板模态框 -->
    <div class="statistics-modal" id="statisticsModal">
        <div class="modal-content statistics-content">
            <div class="modal-header">
                <h3>📊 数据统计</h3>
                <button class="close-btn" id="closeStatsBtn">&times;</button>
            </div>
            
            <div class="modal-body statistics-body">
                <!-- 统计概览 -->
                <div class="stats-overview">
                    <div class="stats-card today-stats">
                        <div class="stats-icon">📅</div>
                        <div class="stats-content">
                            <div class="stats-title">今日统计</div>
                            <div class="stats-value" id="todayPomodoros">0</div>
                            <div class="stats-label">个番茄</div>
                            <div class="stats-detail">
                                <span id="todayFocusTime">0</span> 分钟专注时间
                            </div>
                        </div>
                    </div>
                    
                    <div class="stats-card week-stats">
                        <div class="stats-icon">📈</div>
                        <div class="stats-content">
                            <div class="stats-title">本周统计</div>
                            <div class="stats-value" id="weekPomodoros">0</div>
                            <div class="stats-label">个番茄</div>
                            <div class="stats-detail">
                                <span id="weekActiveDays">0</span> 天活跃
                            </div>
                        </div>
                    </div>
                    
                    <div class="stats-card total-stats">
                        <div class="stats-icon">🏆</div>
                        <div class="stats-content">
                            <div class="stats-title">总计统计</div>
                            <div class="stats-value" id="totalPomodoros">0</div>
                            <div class="stats-label">个番茄</div>
                            <div class="stats-detail">
                                <span id="totalHours">0</span> 小时专注
                            </div>
                        </div>
                    </div>
                    
                    <div class="stats-card streak-stats">
                        <div class="stats-icon">🔥</div>
                        <div class="stats-content">
                            <div class="stats-title">连续天数</div>
                            <div class="stats-value" id="streakDays">0</div>
                            <div class="stats-label">天</div>
                            <div class="stats-detail">
                                最长 <span id="longestStreak">0</span> 天
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 统计图表区域 -->
                <div class="stats-charts">
                    <!-- 趋势图表 -->
                    <div class="chart-section">
                        <div class="chart-header">
                            <h4>📊 最近7天趋势</h4>
                            <div class="chart-controls">
                                <button class="chart-btn" data-period="7" id="trend7Days">7天</button>
                                <button class="chart-btn" data-period="30" id="trend30Days">30天</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="trendChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                    
                    <!-- 时段分布图表 -->
                    <div class="chart-section">
                        <div class="chart-header">
                            <h4>⏰ 时段分布</h4>
                        </div>
                        <div class="chart-container">
                            <canvas id="hourlyChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 效率分析 -->
                <div class="efficiency-analysis">
                    <h4>🎯 效率分析</h4>
                    <div class="analysis-grid">
                        <div class="analysis-item">
                            <div class="analysis-label">平均每日番茄</div>
                            <div class="analysis-value" id="avgDailyPomodoros">0</div>
                        </div>
                        <div class="analysis-item">
                            <div class="analysis-label">最高效时段</div>
                            <div class="analysis-value" id="mostProductiveHour">--</div>
                        </div>
                        <div class="analysis-item">
                            <div class="analysis-label">专注一致性</div>
                            <div class="analysis-value" id="consistency">0%</div>
                        </div>
                        <div class="analysis-item">
                            <div class="analysis-label">趋势状态</div>
                            <div class="analysis-value" id="trendStatus">稳定</div>
                        </div>
                    </div>
                </div>
                
                <!-- 数据管理 -->
                <div class="stats-data-management">
                    <h4>💾 数据管理</h4>
                    <div class="data-actions">
                        <button class="data-action-btn export-stats-btn" id="exportStatsBtn">
                            <span class="btn-icon">📤</span>
                            导出统计数据
                        </button>
                        <button class="data-action-btn reset-stats-btn" id="resetStatsBtn">
                            <span class="btn-icon">🔄</span>
                            重置统计数据
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer">
                <button class="modal-btn close-btn" id="closeStatisticsBtn">关闭</button>
            </div>
        </div>
    </div>

    <!-- 任务管理模态框 -->
    <div class="tasks-modal" id="tasksModal">
        <div class="modal-content tasks-content">
            <div class="modal-header">
                <h3>📝 任务管理</h3>
                <button class="close-btn" id="closeTasksBtn">&times;</button>
            </div>
            
            <div class="modal-body tasks-body">
                <!-- 任务输入区域 -->
                <div class="task-input-section">
                    <div class="task-input-group">
                        <input type="text" id="taskInput" placeholder="输入新任务..." class="task-input">
                        <button class="add-task-btn" id="addTaskBtn">添加</button>
                    </div>
                </div>
                
                <!-- 任务列表 -->
                <div class="tasks-list-section">
                    <div class="tasks-header">
                        <h4>任务列表</h4>
                        <div class="task-filters">
                            <button class="filter-btn active" data-filter="all">全部</button>
                            <button class="filter-btn" data-filter="pending">待完成</button>
                            <button class="filter-btn" data-filter="completed">已完成</button>
                        </div>
                    </div>
                    <div class="tasks-list" id="tasksList">
                        <!-- 任务项将在这里动态生成 -->
                    </div>
                </div>
                
                <!-- 任务统计 -->
                <div class="task-stats-section">
                    <div class="task-stats">
                        <div class="stat-item">
                            <span class="stat-label">总任务：</span>
                            <span class="stat-value" id="totalTasks">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">已完成：</span>
                            <span class="stat-value" id="completedTasks">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">完成率：</span>
                            <span class="stat-value" id="completionRate">0%</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer">
                <button class="modal-btn clear-completed-btn" id="clearCompletedBtn">清除已完成</button>
                <button class="modal-btn close-btn" id="closeTasksModalBtn">关闭</button>
            </div>
        </div>
    </div>

    <script src="js/timer.js"></script>
    <script src="js/audio.js"></script>
    <script src="js/focus-mode.js"></script>
    <script src="js/theme.js"></script>
    <script src="js/settings.js"></script>
    <script src="js/statistics.js"></script>
    <script src="js/tasks.js"></script>
    <script src="js/app.js"></script>
</body>
</html>